<template>
  <div id="head">
    <!-- 商家 -->
    <dl>
      <dd><img :src="seller.avatar" alt="" /></dd>
      <dt>
        <ul>
          <!-- 商家名 -->
          <li>
            <img src="./image/brand@2x.png" alt="" />
            <p class="name">{{ seller.name }}</p>
          </li>
          <!-- 配送 -->
          <li>
            <p class="distribution">
              {{ seller.description }}/{{ seller.deliveryTime }}分钟送达
            </p>
          </li>
          <!-- 活动 -->
          <li class="lis">
            <div class="lis-activity">
              <img src="./image/decrease_1@2x.png" alt="" />
              <p class="activity">在线支付满28元减5，满50减10</p>
            </div>

            <span class="supports" @click="show = true">
              {{ seller.supports.length }}个&nbsp;&gt;
            </span>
          </li>
        </ul>
      </dt>
    </dl>
    <!-- 公告 -->
    <div class="notice">
      <img src="./image/bulletin@2x.png" alt="" />
      <p>{{ seller.bulletin }}</p>
      <span>&gt;</span>
    </div>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      closeable
      close-icon-position="bottom-right"
      :style="{ height: '100%' }"
    >
      <Activity></Activity>
    </van-popup>
  </div>
</template>


<script>
import Activity from "./Activity";
export default {
  props: [],
  data() {
    return {
      seller: [],
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
  mounted() {
    this.$http.get("/data.json").then((res) => {
      console.log(res);
      this.seller = res.data.seller;
    });
  },
  components: {
    Activity,
  },
};
</script>


<style scoped>
#head {
  width: 100%;
  height: 2.68rem;
  background: url(./image/banear.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
/* 商家 */
dl {
  width: 100%;
  height: 2.12rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.2rem;
  box-sizing: border-box;
}
dd {
  width: 20%;
  display: flex;
  align-items: center;
  text-align: center;
}
dt {
  width: 75%;
}
dd img {
  width: 1.5rem;
  height: 1.5rem;
}
.lis {
  justify-content: space-between;
  align-items: center;
}
.lis-activity {
  display: flex;
  align-items: center;
}
dt ul {
  width: 100%;
  height: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
dt ul li {
  display: flex;
  align-items: center;
  color: #fff;
  width: 100%;
}
.name {
  font-size: 0.32rem;
  font-weight: bold;
  line-height: 0.36rem;
  margin-left: 0.12rem;
}
.distribution {
  font-size: 0.24rem;
  line-height: 0.24rem;
}
.activity {
  font-size: 0.2rem;
  line-height: 0.24rem;
  margin-left: 0.08rem;
}

.supports {
  display: inline-block;
  width: 0.86rem;
  height: 0.48rem;
  line-height: 0.48rem;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  border-radius: 0.2rem;
  font-size: 0.2rem;
}
.van-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: none;
  padding: 0.64rem 0.72rem ;
  box-sizing: border-box;
}

/* 公告 */
.notice {
  width: 100%;
  height: 0.56rem;
  position: absolute;
  bottom: 0rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0 0.2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 0.2rem;
}
.notice p {
  margin: 0 0.08rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.2rem;
}
</style>